<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" :body-style="{height:'calc(100vh - 230px)'}">
          <el-button type="primary" size="medium" @click="addWaterMark()">添加水印</el-button>
          <el-button type="primary" size="medium" @click="setOtherWaterMark()">添加自定义水印</el-button>
          <el-button type="primary" size="medium" @click="removeWaterMark()">移除水印</el-button>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'watermark',
  data(){
      return {
        text:''
  }
  },
  methods: {
    addWaterMark() {
      this.$EventBus.$emit('addMark')
    },
    setOtherWaterMark() {
      this.$prompt('请输入自定义水印', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue:this.text,
      }).then(({ value })=>{
        this.$EventBus.$emit('setOtherWaterMark',value)
      }).catch();
      // if (this.text==='') this.text = '河北彩花'

    },
    removeWaterMark() {
      this.$EventBus.$emit('removeMark')
    }
  }
}
</script>

<style scoped>

</style>
